<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{../bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{../css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{../css/main.css}">
    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        table tbody tr:nth-child(odd){background:#F4F4F4;}
        table tbody td:nth-child(even){color:#C00;}
        select,option{
           font-size: 20px;
        }
        .myModal-input{
            width: 200px;
            line-height: 30px;
            display: inline;
        }
        .modal-dialog{
            width:900px;
        }
        label{
            display: inline-block;
            min-width: 70px;/*或者 width: 100px;*/
        }
    </style>
</head>
<body>


<div th:replace="../templates/nav"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="../templates/menu"></div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2 class="panel-title"><i class="glyphicon glyphicon-th"></i>个人中心</h2>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;" id="changeMassageForm">
                        <input type="hidden" name="uid" id="uid">
                        <div class="form-group">
                            <label for="uname">姓&nbsp;&nbsp;&nbsp;&nbsp;名</label>
                            <input type="email" class="form-control rua" id="uname"  name="uname"  placeholder="Email" disabled="disabled">
                        </div>
                        <br>
                        <div class="form-group">
                            <label for="uaccount">账&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                            <input type="email" class="form-control" id="uaccount" name="uaccount" placeholder="Email" disabled="disabled">
                        </div>
                        <br>
                        <div class="form-group">
                            <label for="ustate">状&nbsp;&nbsp;&nbsp;&nbsp;态</label>
                            <input type="email" class="form-control" id="ustate" name="ustate" placeholder="Email" disabled="disabled">
                        </div>
                        <br>
                        <div class="form-group">
                            <label for="uphone">手&nbsp;&nbsp;&nbsp;&nbsp;机</label>
                            <input type="email" class="form-control rua" id="uphone" name="uphone" placeholder="Email" disabled="disabled">
                        </div>
                        <br>
                        <div class="form-group">
                            <label for="area">校&nbsp;&nbsp;&nbsp;&nbsp;区</label>
                            <select class="rua" disabled="disabled"  name="area" id="area"></select>
                        </div>
                        <br>
                        <button type="button" class="btn btn-success"  onclick="changeMassage()">修改</button>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input id="saveBtn" type="hidden" value="保存" onclick="saveMassage()">
                    </form>
                    <hr style="clear:both;">
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{../jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{|/jquery/jquery.md5.js|}"></script>
<script th:src="@{../bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{../script/docs.min.js}"></script>
<script th:src="@{../layer/layer.js}"></script>
<script type="text/javascript">

    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        showMassage();
    });

    function saveMassage(){
        var phone = $("#uphone").val();
        var f=true;
        if(!(/^1[3456789]\d{9}$/.test(phone))) {
            layer.msg("手机号码有误，请重填", {time:1000, icon:5, shift:3}, function(){});
            f=false;
        }
        if (f){
            url="/changePersonalMassage"
        var da=$("#changeMassageForm").serialize();
        $.get(url,da,function (data){
            if (data.result){
                layer.msg("保存成功！", {time:1000, icon:4, shift:3}, function(){});
                $(".rua").attr('disabled','disabled');
                $("#saveBtn").attr('type','hidden');
            }
        })
        }
    }
    //修改编辑框状态，并且添加保存按钮
    function changeMassage(){
        $(".rua").removeAttr("disabled");
        $("#saveBtn").attr('type','button');
    }
    //数据回填
    function showMassage(){
        url="/findOne"
        $.get(url,"",function (data){
            if (data.result){
                var user=data.user
              $("#uid").val(user.uid)
              $("#uname").val(user.uname)
              $("#uaccount").val(user.uaccount)
              $("#ustate").val(user.ustate)
              $("#uphone").val(user.uphone)
                var str="";
              $.each(data.schoolList,function (index,school){
                if (school.schname == user.area){
                    str+="<option value='"+school.schname+"' selected>"+school.schname+"</option>";
                }else{
                    str+="<option value='"+school.schname+"'>"+school.schname+"</option>";
                  }
              })
                $("#area").html(str);
            }
        })
    }
</script>
</body>
</html>







